/*
 * @Author: jjjjwei 1506865174@qq.com
 * @Date: 2022-08-10 17:43:33
 * @LastEditors: Xia_cc 978487464@qq.com
 * @LastEditTime: 2022-08-17 16:50:19
 * @FilePath: \react\react-routeredux\src\component\organizationmanage\Gangweiguanli.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React,{ useState } from 'react'
import { Button, Table ,Modal,Form,Input,DatePicker} from 'antd'
import { useNavigate } from "react-router-dom";
import "./Gangweiguanli.css"

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 36,
    address: 'New York Park',
  },{
    key: '2',
    name: 'Jim Green',
    age: 40,
    address: 'London Park',
  },{
    key: '3',
    name: 'John Brown',
    age: 12,
    address: 'New Park',
  },{
    key: '4',
    name: 'Jim Green',
    age: 10,
    address: 'London ',
  },{
    key: '5',
    name: 'John Brown',
    age: 32,
    address: 'NPark',
  },{
    key: '6',
    name: 'Jieen',
    age: 40,
    address: 'Loark',
  },
];


const Gangweiguanli = () => {
  const navigate = useNavigate();
  const tiaozhuan = ()=>{
    navigate('/home/organizationmanage/Gangwei/GangweiChange')
  }

  const columns = [
    {
      title: '序号',
      // width: 100,
      dataIndex: 'name',
      align:'center',
      key: 'name',
      // fixed: 'left',
    },
    {
      title: '岗位名称',
      // width: 100,
      dataIndex: 'age',
      align:'center',
      key: 'age',
      // fixed: 'left',
    },
    {
      title: '关联员工数',
      dataIndex: 'address',
      align:'center',
      key: '1',
    },
    {
      title: '创建人',
      dataIndex: 'address',
      align:'center',
      key: '2',
    },
    {
      title: '创建日期',
      dataIndex: 'address',
      align:'center',
      key: '3',
    },
    {
      title: '操作',
      key: 'operation',
      align:'center',
      // fixed: 'right',
      // width: 100,
      render: () => <>
                      <span className='action' >权限</span>&nbsp;&nbsp;&nbsp;
                      <span className='action' onClick={tiaozhuan}>编辑</span>&nbsp;&nbsp;&nbsp;
                      <span className='action' onClick={showModal}>删除</span>
                    </>,
    }
  ];
//删除岗位模态框
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
//添加岗位模态框
  const [TJVisible, setTJVisible] = useState(false);
  const TJshowModal = () => {
    setTJVisible(true);
  };
  const TJhandleOk = () => {
    setTJVisible(false);
  };
  const TJhandleCancel = () => {
    setTJVisible(false);
  };
  const getform =(value)=>{
    console.log(value);
  };

  return(
    <div className='GangWeiGuanLiBox'>
    <Button className='addBut' type='primary' onClick={TJshowModal}>增加岗位</Button>
    <Table
      columns={columns}
      dataSource={data}
      className="GWGLtable"/>
    <Modal title="确认删除" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消">
        <h2 className='ifDel'>是否确认删除该岗位</h2>
        <p className='del'>删除后将不可恢复</p>
    </Modal>
    <Modal title="添加岗位" visible={TJVisible} onOk={TJhandleOk} onCancel={TJhandleCancel} okText="确认">
        <Form
        onFinish={getform}
        >
        <Form.Item name="name" label="岗位名称"
          rules={[{ required: true,message: 'Username is required!'}]}>
          <Input />
        </Form.Item>
        <Form.Item name="personnumber" label="关联岗位人数">
          <Input />
        </Form.Item>
        <Form.Item name="person" label="创建人"
          rules={[{ required: true}]}>
          <Input />
        </Form.Item>
        <Form.Item name="date" label="创建日期">
         <DatePicker showTime style={{width:"100%"}} format="YYYY-MM-DD" placeholder="请选择"/> 
        </Form.Item>
        </Form>
    </Modal>
    </div>
  );
}

export default Gangweiguanli
